import './App.scss';
import './assets/font/iconfont.css'
//react中存在两种形式的组件；函数式组件，类组件
//使用rcc  快速创建 类组件（主要使用这个）
//使用rsf  快速创建 函数式组件
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {  //构造函数,只在组件实例化执行一次
    super(props);
    //定义组件状态
    this.state = {
      list: [
        {
          pic: '	https://pic.cdfgsanya.com/assets/upload/visual/e3763dce7fd8c3da3d36851194a08b70.png?1662996830112',
          name: "护肤"
        },
        {
          pic: '	https://pic.cdfgsanya.com/assets/upload/visual/e6380f815b2f272c197bce33d3d5a0f0.png?1662996846908',
          name: "彩妆"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/57b4b0241402068d8b494e77ac65b582.png?1662996862119',
          name: "香氛"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/6d5c700a378eba148ac638e78f6f8dc7.png?1662996839405',
          name: "进口酒"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/6d5c700a378eba148ac638e78f6f8dc7.png?1662996839405',
          name: "国产酒"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/a89820d6dc73e47261744f50a0bea0cc.png?1662996893301',
          name: "精品奢货"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/2225674418420d17e045cf4a9fff76cc.png?1662996854852',
          name: "食品百货"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/2225674418420d17e045cf4a9fff76cc.png?1662996854852',
          name: "母婴专区"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/58946023386d5813621c8c8fb61e0d48.png?1662996903878',
          name: "直播专区"
        },
        {
          pic: 'https://pic.cdfgsanya.com/assets/upload/visual/67fb94c591129bdd1794c5a5e5a0d854.png?1662996923267',
          name: "特卖专区"
        },
      ],
      tabbar: [
        {
          icon: 'icon-home',
          text: '店铺'
        },
        {
          icon: 'icon-fenlei',
          text: '分类'
        },
        {
          icon: 'icon-quanbu',
          text: '全部商品'
        },
        {
          icon: 'icon-gouwuche',
          text: '购物车'
        },
        {
          icon: 'icon-gerenzhongxin',
          text: '个人中心'
        }

      ]
    }

  }

  render() {//渲染组件模板到视图

    //在jsx语法中 书写js代码，js代码必须被包裹在{中}
    return (
      <div className='app '>
        {/*顶部搜索框 */}
        <div className='input-box'>
          <input type="text" placeholder='搜索商品' />
          <span>客服</span>
        </div>
        {/* 轮播图 */}
        <div className='swiper'></div>
        {/* 快捷分类 */}
        <div className='list'>
          {
            this.state.list.map((item, index) => {
              return (
                <div className='cate' key={index}>
                  <img src={item.pic} alt="" />
                  <span className='name'>{item.name}</span>
                </div>
              )
            })
          }
        </div>

        {/* Tabbar */}
        <div className='tabbar'>
          {
            this.state.tabbar.map((item, index) => {
              return (
                <div className='tab' key={index}>
                  <i className={'iconfont ' + item.icon}></i>
                  <div>{item.text}</div>
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default App;